<html>
    <head>
        <title>绑定值</title>
    </head>
    <body>
        <script>
               // ★、绑定值
                            /*
                                1、★ 单选按钮、复选框以及选择框的选项
                                        对"单选按钮"、"复选框"、"选择框" 的选项， v-model绑定的值通常是"静态字符串"(复选框的勾选框也可以是布尔值)：


                                        -- 当选中时， 'picked' 为字符串 "a"
                                        <input type="radio" v-model="picked" value="a">

                                        -- 'toggle' 为 true 或 false
                                        <input type="checkbox" v-model="togle">

                                        -- 当选中第一个选项时，'selected' 为字符串 "abc"
                                        <select v-model="selected">
                                            <option value="abc">ABC</option>
                                        </select>

                                    但是有时候我们希望把表单匀速的选项值绑定到Vue实例的一个动态 property 上，这时可以用 v-bind 实现，
                                    并且这个 property 的值可以不是字符串。
                            */
                           
                            /*
                                2、★ 复选框
                                        <input type="checkbox" v-model="toggle" true-value="yes"  false-value="no">
                            */
                                        // 当选中时 
                                        vm.toggle ==='yes';
                                        // 当没有选中时
                                        vm.toggle ==='no';

                                        /*
                                            注意：
                                                 这里的 true-value 和 false-value attribute 并不会影响输入控件的 value atrribute,
                                                 
                                        */
        </script>
    </body>
</html>